<template>
  <div class="goods-list">
    
    <router-link :to="'/home/goodsInfo/'+item.id" tag="div" class="goods-item" v-for="item in goodsList" :key="item.id">
      <img :src="item.img_url" alt />
      <h1 class="title">{{item.title}}</h1>
      <div class="info">
        <p class="price">
          <span class="now">{{item.sell_price}}</span>
          <span class="old">{{item.market_price}}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩余{{item.stock_quantity}}件</span>
        </p>
      </div>
    </router-link>

    <!-- 在网页中，两种跳转方式 -->
    <!-- 1.标签跳转：使用 a 标签 （上面那种）-->
    <!-- 2.编程式导航：使用 windows.location.href 的形式（用JS语句） -->
    <!-- <div tag="div" class="goods-item" v-for="item in goodsList" 
    :key="item.id" @click="goDetail(item.id)">
      <img :src="item.img_url" alt />
      <h1 class="title">{{item.title}}</h1>
      <div class="info">
        <p class="price">
          <span class="now">{{item.sell_price}}</span>
          <span class="old">{{item.market_price}}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩余{{item.stock_quantity}}件</span>
        </p>
      </div>
    </div> -->

    <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>

  </div>
</template>

<script>
export default{
    data(){
        return {
            pageIndex:1, //分页的页数
            goodsList:[], //存放商品列表
        }
    },
    created() {
        this.getGoodsList();
    },
    methods:{
        getGoodsList(){
            this.$http.get('api/getgoods?pageindex='+this.pageIndex)
            .then(result=>{
                if(result.body.status===0){
                    // console.log(result.body);
                    // 数组不能直接相加
                    // this.goodsList+=result.body.message;
                    this.goodsList=this.goodsList.concat(result.body.message);
                }
            })
        },
        getMore(){
            this.pageIndex++;
            this.getGoodsList();
        },

        // 使用JS形式跳转页面
        // goDetail(id){
        //     // path 和 params 不能一起用 （params会被忽略）
        //     // 1.最简单的
        //     // this.$router.push('/home/goodsInfo/'+id)
        //     // 2.传递对象
        //     // this.$router.push({path:'/home/goodsInfo/'+id})
        //     // 3.传递命名的路由
        //     this.$router.push({name:'GoodsInfo',params:{id:id}})
        // },
    },

};
</script>

<style lang="scss" scoped>
.goods-list {
  display: flex;
  // 换行
  flex-wrap: wrap;
  // 让每排两边距离一样
  padding: 7px;
  justify-content: space-between;

  .goods-item {
    width: 49%;
    margin: 5px 0;
    padding: 2px;
    border: #ccc 1px solid;
    // 水平位移 垂直位移 模糊半径
    box-shadow: 0 0 7px #ccc;
    // 解决当一行两个item 文字描述 行数不一样时 下面出现的空白区域
    // 改变 流向（由横向改为纵向）然后让空白区域在各个元素中间
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // 设置最小高度
    min-height: 290px;
    img {
      width: 100%;
    }
    .title {
      font-size: 16px;
    }
    .info {
      background: #eee;
      p {
        margin: 0;
        padding: 3px;
      }
      .price {
        .now {
          color: red;
          font-weight: bold;
          font-size: 16px;
        }
        .old {
          font-size: 13px;
          text-decoration: line-through;
          margin-left: 11px;
        }
      }
      .sell {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
      }
    }
  }
}
</style>